<template>
    <div class="box6"> 
        <div class="title">
            <p>热门景区排行</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <!-- 图像图表的容器 -->
        <div class="charts" ref="charts">

        </div>
    </div>
</template>

<script lang="ts" setup name="Rank">
    import {ref,onMounted} from 'vue'
    import * as echarts from 'echarts'

    // 获取dom元素
    let charts=ref()

    // 组件挂载完毕
    onMounted(()=>{
        // 一个容器可以同时展示多种类型的图像图表
        let mychart=echarts.init(charts.value)
        // 设置配置项
        mychart.setOption({
            // 标题组件
            title:{
                text:'景区排行',
                link:'http://www.baidu.com',
                // 标题位置
                left:'50%',
                textStyle:{
                    color:'yellowgreen',
                    fontSize:20
                },
                // 子标题
                subtext:'各大景区排行',
                // 子标题样式
                subtextStyle:{
                    color:'yellowgreen',
                    fontSize:16
                }
            },
            // x|y轴组件
            xAxis:{
                type:'category' // 图形图标在x轴均匀分布
            },
            yAxis:{},
            // 布局组件
            grid:{
                left:20,
                bottom:20,
                right:20
            },
            // 系列：决定你展示的什么类型图形
            series:[
                {
                    type:'bar',
                    data:[10,20,30,40,50,60,70],
                    // 柱状图上的文本标签
                    label:{
                        show:true,
                        position:'insideTop',
                        // 文字颜色
                        color:'yellowgreen'
                    },
                    // 是否显示背景颜色
                    showBackground:true,
                    backgroundStyle:{
                        // 底部背景的颜色
                        color:{
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'black' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },

                    },
                    // 柱条的样式
                    itemStyle:{
                        borderRadius:[10,10,0,0],
                        // 逐条颜色
                        color:function(data:any){
                            // 给每一个柱条设置背景颜色
                            let arr =['red','orange','yellowgreen','green','purple','hotpink','skyblue']
                            return arr[data.dataIndex];
                        }
                    }
                },
                {
                    type:'line',
                    data:[10,20,30,40,50,60,90],
                    smooth:true // 平滑曲线
                }
            ],
            // 提示框浮层
            tooltip:{
                backgroundColor:'rgba(50,50,50,0.5)',
                textStyle:{
                    color:'white'
                }
            }
        })
    })
</script>

<style scoped lang="scss">
    .box6{
        width: 100%;
        height: 100%;
        background: url(../../images/dataScreen-main-cb.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 0px;

        .title{
            margin-right: 10px;
            p{
                color: white;
                font-size: 20px;
            }
        }

        .charts{
            height:calc(100% - 30px)
        }

    }

</style>